<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>Form Elements - Ace Admin</title>

<meta name="description" content="Common form elements and layouts" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

<!-- bootstrap & fontawesome -->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/bootstrap.min.css" />

<!-- page specific plugin styles -->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/jquery-ui.custom.min.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/chosen.min.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/bootstrap-datepicker3.min.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/bootstrap-timepicker.min.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/daterangepicker.min.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/bootstrap-colorpicker.min.css" />


<!-- ace styles -->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/ace.min.css"
	id="main-ace-style" />

<!--[if lte IE 9]>
			<link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/ace-part2.min.css" />
		<![endif]-->
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/ace-skins.min.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath()%>/ace/assets/css/ace-rtl.min.css" />

<!--[if lte IE 9]>
		  <link rel="stylesheet" href="<%=request.getContextPath()%>/ace/assets/css/ace-ie.min.css" />
		<![endif]-->

<!-- inline styles related to this page -->

<!-- ace settings handler -->
<script
	src="<%=request.getContextPath()%>/ace/assets/js/ace-extra.min.js"></script>

<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->

<!--[if lte IE 8]>
		<script src="<%=request.getContextPath()%>/ace/assets/js/html5shiv.min.js"></script>
		<script src="<%=request.getContextPath()%>/ace/assets/js/respond.min.js"></script>
		<![endif]-->

<link rel="stylesheet"
	href="<%=request.getContextPath()%>/static/jquery-validate/css/form.css" />

<script type="text/javascript" src="${ctx }/static/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="${ctx }/static/js/ajaxfileupload.js"></script>	
</head>

<body class="no-skin">
	

	<!-- /section:basics/content.breadcrumbs -->
	<div class="page-content">
		<!-- /section:settings.box -->
		<div class="page-content-area">
			<div class="page-header">
				<h1>上传语音</h1>
			</div>
			<!-- /.page-header -->

			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					<form id="drizzt-table" class="form-horizontal"
						action="<%=request.getContextPath()%>/bsbExpertQu/create.do"
						method="post">
						<!-- #section:elements.form -->
						 
  						<div class="form-group">
							<label class="col-sm-1 control-label no-padding-right"
								for="form-field-1"> 问题内容 </label>

							<div class="col-sm-8">
								<textarea name="question" class="form-control limited "  maxlength="300" tip="300字以内"></textarea>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-1 control-label no-padding-right"> 
								选择标签
							</label>
							<div class="col-sm-8">
										<div class="tabbable">
											<ul class="nav nav-tabs padding-12 tab-color-blue background-blue" id="myTab4">
												<li class="active">
													<a data-toggle="tab" href="#home4">按行业</a>
												</li>

												<li>
													<a data-toggle="tab" href="#profile4">按地区</a>
												</li>

											</ul>

											<div class="tab-content col-sm-12">
												<div id="home4" class="tab-pane in active">
													<label class="col-sm-1 control-label no-padding-right"
														for="form-field-1">行业</label>
						
													<div class="col-sm-2">
														<select name="trade" class="country" >
															<option value="">--选择行业--</option>
															<c:forEach items="${trades }" var="trade">
																<option value="${trade.uuid }">${trade.name }</option>
															</c:forEach>
														</select>
													</div>
													<label class="col-sm-1 control-label no-padding-right"
														for="form-field-2">税种</label>
						
													<div class="col-sm-2">
														<select name="tax" class="country" >
															<option value="">--选择税种--</option>
															<c:forEach items="${taxs }" var="tax">
																<option value="${tax.uuid }">${tax.name }</option>
															</c:forEach>
														</select>
													</div>
													<label class="col-sm-1 control-label no-padding-right"
														for="form-field-3">专题</label>
						
													<div class="col-sm-2">
														<select name="topic" class="country" >
															<option value="">--选择专题--</option>
															<c:forEach items="${topics }" var="topic">
																<option value="${topic.uuid }">${topic.name }</option>
															</c:forEach>
														</select>
													</div>
												</div>

												<div id="profile4" class="tab-pane">
													<label class="col-sm-1 control-label no-padding-right"
														for="form-field-2">地区</label>
						
													<div class="col-sm-2">
														<select name="areaId"  class="region">
															<option value="">--选择地区--</option>
															<c:forEach items="${areas }" var="area">
																<option value="${area.id }">${area.name }</option>
															</c:forEach>
														</select>
													</div>
													<label class="col-sm-1 control-label no-padding-right"
														for="form-field-2">税种</label>
						
													<div class="col-sm-2">
														<select name="areatax" class="region">
															<option value="">--选择税种--</option>
															<c:forEach items="${taxs }" var="tax">
																<option value="${tax.uuid }">${tax.name }</option>
															</c:forEach>
														</select>
													</div>
												</div>

											</div>
										</div><!-- /.col -->
							</div>
						</div>
						
						  						<div class="form-group">
							<label class="col-sm-1 control-label no-padding-right"
								for="form-field-1"> 所属人 </label>

							<div class="col-sm-9">
									<select name="userId" id="userId">
										<option value="">--选择专家--</option>
										<c:forEach items="${experts }" var="expert">
											<option value="${expert.uuid }">${expert.name }</option>
										</c:forEach>
									</select>
							</div>
						</div>
						  						
						  						<div class="form-group">
							<label class="col-sm-1 control-label no-padding-right"
								for="form-field-1"> 问题价格 </label>

							<div class="col-sm-9">
								<input type="number" 
									placeholder="quPrice"
									name="quPrice" min="0" tip="填写0为免费"
									class="col-xs-10 col-sm-5" />
							</div>
						</div>
						  						
						    						<div class="form-group">
							<label class="col-sm-1 control-label no-padding-right"> 上传语音 </label>

							<div class="col-sm-9">
						       		<audio src="" id="audios" style="=opacity: 0;"></audio>
						       	 	<input type="file" id="file" name="file" class="col-sm-2"/>

								<input type="button" onclick="ajaxFileUpload()" class="btn btn-info col-sm-2" value="上传">
								<input type="hidden" name="audio" id="audio">
								<input type="hidden" name="duration" id="duration">
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-1 control-label no-padding-right"
								for="form-field-1"> 语音文本 </label>

							<div class="col-sm-8">
								<textarea name="audiotxt" tip="语音文本"  class="autosize-transition form-control"></textarea>
							</div>
						</div>
						   
						<div class="clearfix form-actions">
							<div class="col-md-offset-3 col-md-9">
								<input  class="btn btn-info" type="submit" value="提交" /> 

								&nbsp; &nbsp; &nbsp;
								<input type="button" class="btn btn-info" onclick="location.href='<%=request.getContextPath()%>/bsbExpertQu/list.do'" value="返回" />
							</div>
						</div>
					</form>

					<!-- PAGE CONTENT ENDS -->
				</div>
				<!-- /.col -->
			</div>
			<!-- /.row -->
		</div>
		<!-- /.page-content-area -->
	</div>
	<!-- /.page-content -->
</body>

<!-- basic scripts -->

<!--[if !IE]> -->
<script type="text/javascript">
	window.jQuery
			|| document
					.write("<script src='<%=request.getContextPath()%>/ace/assets/js/jquery.min.js'>"
							+ "<"+"/script>");
</script>

<!-- <![endif]-->

<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='<%=request.getContextPath()%>/ace/assets/js/jquery1x.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
<script type="text/javascript">
	if ('ontouchstart' in document.documentElement)
		document.write("<script src='<%=request.getContextPath()%>/ace/assets/js/jquery.mobile.custom.min.js'>" + "<"+"/script>");
</script>

<script src="<%=request.getContextPath()%>/ace/assets/js/bootstrap.min.js"></script>

<script src="<%=request.getContextPath()%>/static/jquery-validate/js/jquery.validate.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/static/jquery-validate/js/jquery.validate.extend.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/static/jquery-validate/js/additional-methods.js" type="text/javascript"></script>
<script src="<%=request.getContextPath()%>/ace/assets/js/bootbox.js"></script>

<script type="text/javascript">
/* $('#file').on("change",function(e){
	var reader = new FileReader();
	reader.readAsDataURL(e.target.files[0]);
	reader.onload = function(files) {
		console.log(files)
		$("#audios").attr('src', this.result); 
	}
})
var audio=document.getElementById("audios"); 
audio.addEventListener("canplay", function(){
	sc=parseInt(audio.duration);
	$("#duration").val(sc);
	alert(sc);
	console.log(sc)
}) */
$('#file').on("change",function(e){
	var audio=document.getElementById("audios");
	 var file=e.target.files[0],src=window.createObjectURL&&window.createObjectURL(file)||window.URL&&window.URL.createObjectURL(file)||window.webkitURL && window.webkitURL.createObjectURL(file);
     if(/^audio/i.test(file.type)){
         audio.style.display='block';
         audio.src=src;
         audio.play();
         function g(){isNaN(audio.duration) ? requestAnimationFrame(g):$("#duration").val(parseInt(audio.duration) * 1000)}
         requestAnimationFrame(g);
     }else{
         audio.pause();
         audio.style.display='none';
         bootbox.alert("请选择音乐文件！");
     }
})
function ajaxFileUpload(){
	var userid = $("#userId").val();
	if(userid==''){
		bootbox.alert("请选择所属人");
	}
	$.ajaxFileUpload({
		url:'<%=request.getContextPath()%>/uploadaudio', //上传的地址
		data:{userid:userid},
		fileElementId:'file',//上传文件的id
		dataType: "json",
		success: function (data){
			if(data){
				$("#audio").val(data.fileName);
				subOpen();//打开websocket连接
				send("transcoding");
			}
			console.log(data);
		}
	})
}

$().ready(function() {
	  $("#drizzt-table").validate({
	    rules: {
	    	question : {
	             required :true,
	             maxlength:300
	         },
	        userId : "required",
	        audiotxt : "required",
	        file : {
	        	required :true,
	        	accept: "audio/*"
	        },
	        quPrice :{
	        	 required :true,
	        	 digits : true
	        }
	    	
	   },
	         messages: {
	        	 question : {
	                 required : "请填写问题内容",
	                 maxlength : "最多输入300字"
	             },
	            
	             userId : {
	                 required : "请选择所属人"
	             },
	             audiotxt : {
	                 required : "请填写语音文本"
	             },
	             quPrice : {
	                 required : "请填写价格",
	                 digits : "价格只能是数字"
	             },
	             file : {
	            	 required : "请选择语音文件",
	            	 accept : "请选择正确的音频文件"
	             }
	            
	   },
		submitHandler: function(form) {
		     $.ajax({
		    	url : "<%=request.getContextPath()%>/bsbExpertQu/create",
		    	type : 'POST',
		    	dataType : "json",
		    	data :  $("#drizzt-table").serialize(),
		    	success : function(data) {
			    	if(data.status){
			    		bootbox.alert(data.msg);
			    		window.location.href="<%=request.getContextPath()%>/bsbExpertQu/list";
			    	}else{
			    		bootbox.alert(data.msg);
			    	}
		    	}
		    	});
		     return false;
		   }
	     });
	 });
	 
jQuery.validator.addMethod("checkAudio", function(value, element) {
    var filepath=$("#file").val();
    //获得上传文件名
    var fileArr=filepath.split("\\");
    var fileTArr=fileArr[fileArr.length-1].toLowerCase().split(".");
    var filetype=fileTArr[fileTArr.length-1];
    console.log("filetype:"+filetype);
    console.log(/^audio/i.test(file.type));
    //切割出后缀文件名
    if(/^audio/i.test(file.type)){
        return true;
    }else{
        return false;
    }
}, "音频文件格式不适合");

$(".region").on("change",function(e){
	$(".country").each(function(a,b){
		b.value = "";
	});
});
$(".country").on("change",function(e){
	$(".region").each(function(a,b){
		b.value = "";
	});
});
</script>

</html>
